<template>
  <div>
    <el-dialog :title="param.textMap[param.dialogStatus]" :visible.sync="param.dialogFormVisible" :width="param.width">
      <el-form  ref="dataForm" :model="param.temp" :label-width="param.labelWidth" style='width: 100%;'>
        <el-form-item
          :prop="item.prop"
          :label="item.label"
          :rules="item.rules"
          v-for="item in param.formItems" :key="item.id">
          <el-input :type="item.inputType" v-model="param.temp[item.prop]" v-if="item.inputType=='text' || item.inputType=='textarea'" :style="item.style" size="mini">
            <template :slot="item.slot" v-if="item.slot != null && item.inputType=='text'">{{item.slotTitle}}</template>
          </el-input>
          <!--日期选择框-->
          <el-date-picker
            v-model="param.temp[item.prop]"
            v-if="item.inputType==='date'"
            size="mini"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <!-- SELECT选择框静态数据-->
          <el-select v-model="param.temp[item.prop]" filterable  placeholder="请选择" v-if="item.inputType=='select'" :style="item.style" size="mini">
            <el-option
              v-for="option in item.options" :option="option"
              :key="option[item.valueName]"
              :label="option[item.labelName]"
              :value="option[item.valueName]">
            </el-option>
          </el-select>
          <!-- SELECT选择框远程搜索-->
          <el-select v-model="param.temp[item.prop]" filterable  placeholder="请选择" v-if="item.inputType=='selectsearch'" :style="item.style" size="mini">
            <el-option
              v-for="option in item.options" :option="option"
              :key="option[item.valueName]"
              :label="option[item.labelName]"
              :value="option[item.valueName]">
            </el-option>
          </el-select>
          <!-- 单选框-->
          <el-radio-group v-model="param.temp[item.prop]" v-if="item.inputType=='radio'">
            <el-radio :label="option.id" v-for="option in item.options" :key="option.id">{{option.labelName}}</el-radio>
          </el-radio-group>
          <!--图片上传-->
          <!--<el-upload-->
            <!--v-if="item.inputType=='upload'"-->
            <!--:action="item.uploadUrl"-->
            <!--:on-preview="handlePreview"-->
            <!--:on-remove="handleRemove"-->
            <!--:on-success="item"-->
            <!--:file-list="item.fileList"-->
            <!--list-type="picture">-->
            <!--<el-button size="small" type="primary">点击上传</el-button>-->
          <!--</el-upload>-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="param.dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="commitData" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import {yfuPost} from '@/utils/request.js'
  import {yfuSuccessToast} from '@/utils/yfuMessage.js'
  export default {
    props: ['param'],
    data () {
      return {
        resetTemp: {}
      }
    },
    created () {
      this.resetTemp = JSON.parse(JSON.stringify(this.param.temp))
      for (let param of this.param.formItems) {
        if (param.inputType === 'selectsearch') {
          let uparam = {}
          yfuPost(this.param.baseURL, param.url, uparam, function (data) {
            if (Array.isArray(data)) {
              param.options = data
            } else {
              param.options = data.datas
            }
          })
        }
      }
    },
    methods: {
      createModuleDialog () {
        this.param.dialogStatus = 'create'
        this.param.dialogFormVisible = true
        // this.param.temp = {}
        // for (let key in this.param.temp) {
        //   this.param.temp[key] = ''
        // }
        // if (this.$refs['dataForm'] != null) {
        //   this.$refs['dataForm'].resetField()
        // }
        this.param.temp = JSON.parse(JSON.stringify(this.resetTemp))
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      modifyModuleDialog (data) {
        this.param.dialogStatus = 'update'
        this.param.dialogFormVisible = true
        // if (this.$refs['dataForm'] != null) {
        //   this.$refs['dataForm'].clearValidate()
        // }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
        // this.param.temp = data
        this.param.temp = Object.assign({}, data) // copy obj
        // for (let key in this.param.temp) {
        //   this.param.temp[key] = data[key]
        // }
      },
      commitData () {
        if (this.param.dialogStatus === 'create') {
          this.createData()
        } else {
          this.updateData()
        }
      },
      createData () {
        let cThis = this
        cThis.$refs['dataForm'].validate((valid) => {
          if (valid) {
            yfuPost(cThis.param.baseURL, cThis.param.createUrl, this.param.temp, (data) => {
              yfuSuccessToast('保存成功')
              cThis.param.dialogFormVisible = false
              cThis.$emit('fmModuleToRefreshTable')
            })
          } else {
            return false
          }
        })
      },
      updateData () {
        let cThis = this
        const tempData = Object.assign({}, this.param.temp)
        cThis.$refs['dataForm'].validate((valid) => {
          if (valid) {
            yfuPost(cThis.param.baseURL, cThis.param.updateUrl, tempData, (data) => {
              yfuSuccessToast('保存成功')
              cThis.param.dialogFormVisible = false
              cThis.$emit('fmModuleToRefreshTable')
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style>

</style>
